<template>
  <div class="workSpace">
    <van-nav-bar title="现场查看" left-arrow="" @click-left='goBack()'></van-nav-bar>
    <van-search placeholder="搜索摄像头名称" show-action v-model="searchData">
      <div slot="action" @click="onSearch">搜索</div>
    </van-search>
    <div id="" v-for="(item,i) in cameras" class="camera_area">
       <p class="cremaName">{{item.name}}</p>
       <iframe
         :src="item.src"
         width="100%"

         id="ysopen"
         allowfullscreen
       >
       </iframe>
      </div>
  </div>
</template>

<script>
  import {
    Toast
  } from 'vant'
  export default {
    data() {
      return {
        url: '',
        imgPath: '',
        openWebView: false,
        cameras: [],
        searchData: '',
        token: '',
        player: ''
      }
    },
    /* updated() {
        //如果在mounted中声明，直播地址还未取到，导致视频不显示。所以放在了这里
        this.player = new ezuiplayer('myplayer');
      }, */
    created() {
      //this.getToken()
      this.getCameras()
      //this.getToken()
    },
    watch: {
      searchData(newVal) {
        if (!newVal.length) {
          this.getCameras()
        }
      }
    },
    methods: {
      getCameras() {
        this.$axios.post('UploadFile/getUrl.do').then(res => {
          if (res.data.status === 200) {
            this.token = res.data.msg
            this.$axios.get('/SheBei/Cameras.do').then(res => {
              if (res.data.status === 200) {
                console.log(res.data.msg)
                this.cameras = res.data.msg
                if (this.cameras.length === 0) {
                  return Toast.fail({
                    message: '暂无数据',
                    duration: 900
                  })
                }

                this.cameras.forEach(item => {
                  item.src = 'https://open.ys7.com/ezopen/h5/iframe?url=ezopen://ksksks@open.ys7.com/'+item.id+'/1.live&autoplay=0&audio=1&accessToken='+this.token
                })
              }
            })
          }
        })

      },
      onSearch() {
        this.$axios.post('/SheBei/SelectCameras.do', {
          name: this.searchData
        }).then(res => {
          if (res.data.status === 200) {
            this.cameras = res.data.msg
            if (this.cameras.length === 0) {
              Toast.fail({
                message: '暂无数据',
                duration: 900
              })
            }
          }
        })
      },

    },
  }
</script>

<style scoped="scoped">
  iframe{
    height: 9.37rem;
  }
  .btn-container .btn-item img {
    width: 59%;
  }

  frame {
    object-fit: container;
  }

  .workSpace {
    background: whitesmoke;
  }

  .crema-bg {
    padding: .4rem;
  }

  .camera_area {
    background: white;
    padding: .3rem;
    margin: .5rem;
    padding-bottom: .6rem;
    margin-bottom: .7rem;
    -moz-box-shadow: 2px 2px 10px #9C9C9C;
    -webkit-box-shadow: 2px 2px 10px #9C9C9C;
    box-shadow: 2px 2px 10px #9C9C9C;
    padding-bottom: 0;
  }

  .crema-bg {
    text-align: center;
  }

  .crema-bg .img {
    vertical-align: middle;
    object-fit: container;
    width: 95%;
    height: 8.5rem;
    margin-right: .5rem;
    border-radius: 10px;
    text-align: center;
  }

  .cremaName {
    padding-left: .5rem;
    margin: .1rem;
    font-size: .9rem;
    color: #333333;
  }

  .hr {
    height: .8rem;
    background: whitesmoke;
    border: none;
  }
</style>
